<!DOCTYPE html>
<html>
<head>
    <title>MQTT WebSocket测试</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
    <script>
        // MQTT客户端
        var client;
        var connected = false;

        // 连接MQTT服务器
        function connect() {
            var host = document.getElementById('host').value;
            var port = parseInt(document.getElementById('port').value);
            var path = document.getElementById('path').value;
            var clientId = 'web_client_' + Math.random().toString(16).substr(2, 8);

            client = new Paho.MQTT.Client(host, port, path, clientId);

            // 设置回调函数
            client.onConnectionLost = onConnectionLost;
            client.onMessageArrived = onMessageArrived;

            // 连接选项
            var options = {
                timeout: 3,
                onSuccess: onConnect,
                onFailure: onFailure
            };

            // 连接
            client.connect(options);
            log('正在连接到 ' + host + ':' + port + path + '...');
        }

        // 连接成功
        function onConnect() {
            connected = true;
            log('连接成功');
            document.getElementById('connection-status').innerHTML = '已连接';
            document.getElementById('connection-status').className = 'connected';

            // 启用按钮
            document.getElementById('btn-disconnect').disabled = false;
            document.getElementById('btn-subscribe').disabled = false;
            document.getElementById('btn-publish').disabled = false;

            // 禁用连接按钮
            document.getElementById('btn-connect').disabled = true;
        }

        // 连接失败
        function onFailure(responseObject) {
            log('连接失败: ' + responseObject.errorMessage);
        }

        // 断开连接
        function disconnect() {
            if (client && connected) {
                client.disconnect();
                connected = false;
                log('已断开连接');
                document.getElementById('connection-status').innerHTML = '未连接';
                document.getElementById('connection-status').className = 'disconnected';

                // 禁用按钮
                document.getElementById('btn-disconnect').disabled = true;
                document.getElementById('btn-subscribe').disabled = true;
                document.getElementById('btn-publish').disabled = true;

                // 启用连接按钮
                document.getElementById('btn-connect').disabled = false;
            }
        }

        // 连接丢失
        function onConnectionLost(responseObject) {
            connected = false;
            if (responseObject.errorCode !== 0) {
                log('连接丢失: ' + responseObject.errorMessage);
            }
            document.getElementById('connection-status').innerHTML = '未连接';
            document.getElementById('connection-status').className = 'disconnected';

            // 禁用按钮
            document.getElementById('btn-disconnect').disabled = true;
            document.getElementById('btn-subscribe').disabled = true;
            document.getElementById('btn-publish').disabled = true;

            // 启用连接按钮
            document.getElementById('btn-connect').disabled = false;
        }

        // 订阅主题
        function subscribe() {
            if (!client || !connected) {
                log('未连接，无法订阅');
                return;
            }

            var topic = document.getElementById('subscribe-topic').value;
            if (!topic) {
                log('请输入订阅主题');
                return;
            }

            client.subscribe(topic, {qos: 0});
            log('已订阅主题: ' + topic);
        }

        // 发布消息
        function publish() {
            if (!client || !connected) {
                log('未连接，无法发布');
                return;
            }

            var topic = document.getElementById('publish-topic').value;
            var message = document.getElementById('publish-message').value;

            if (!topic) {
                log('请输入发布主题');
                return;
            }

            if (!message) {
                log('请输入发布消息');
                return;
            }

            var mqttMessage = new Paho.MQTT.Message(message);
            mqttMessage.destinationName = topic;
            mqttMessage.qos = 0;

            client.send(mqttMessage);
            log('已发布消息: ' + topic + ' => ' + message);
        }

        // 收到消息
        function onMessageArrived(message) {
            var topic = message.destinationName;
            var payload = message.payloadString;

            log('收到消息: ' + topic + ' => ' + payload);

            // 添加到消息列表
            var messageList = document.getElementById('message-list');
            var item = document.createElement('li');
            item.textContent = topic + ': ' + payload;
            messageList.appendChild(item);

            // 滚动到底部
            var messageContainer = document.getElementById('message-container');
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }

        // 记录日志
        function log(message) {
            var now = new Date();
            var timestamp = now.toLocaleTimeString();
            console.log(timestamp + ' ' + message);

            var logElement = document.getElementById('log');
            logElement.value += timestamp + ' ' + message + '\n';
            logElement.scrollTop = logElement.scrollHeight;
        }
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-top: 0;
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h2 {
            margin-top: 0;
            color: #555;
        }
        label {
            display: inline-block;
            width: 100px;
            margin-bottom: 10px;
        }
        input[type="text"] {
            padding: 5px;
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #log {
            width: 100%;
            height: 100px;
            border: 1px solid #ddd;
            padding: 5px;
            font-family: monospace;
            overflow-y: scroll;
            background-color: #f9f9f9;
        }
        .status {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 3px;
            color: white;
            font-weight: bold;
        }
        .connected {
            background-color: #4CAF50;
        }
        .disconnected {
            background-color: #f44336;
        }
        #message-container {
            height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            margin-top: 10px;
            background-color: #f9f9f9;
        }
        #message-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #message-list li {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>MQTT WebSocket测试</h1>

        <div class="section">
            <h2>连接</h2>
            <div>
                <label>服务器:</label>
                <input type="text" id="host" value="localhost">
            </div>
            <div>
                <label>端口:</label>
                <input type="text" id="port" value="8083">
            </div>
            <div>
                <label>路径:</label>
                <input type="text" id="path" value="/mqtt">
            </div>
            <div>
                <label>状态:</label>
                <span id="connection-status" class="status disconnected">未连接</span>
            </div>
            <div style="margin-top: 10px;">
                <button id="btn-connect" onclick="connect()">连接</button>
                <button id="btn-disconnect" onclick="disconnect()" disabled>断开</button>
            </div>
        </div>

        <div class="section">
            <h2>订阅</h2>
            <div>
                <label>主题:</label>
                <input type="text" id="subscribe-topic" value="/test">
                <button id="btn-subscribe" onclick="subscribe()" disabled>订阅</button>
            </div>
        </div>

        <div class="section">
            <h2>发布</h2>
            <div>
                <label>主题:</label>
                <input type="text" id="publish-topic" value="/test">
            </div>
            <div>
                <label>消息:</label>
                <input type="text" id="publish-message" value="Hello MQTT!">
                <button id="btn-publish" onclick="publish()" disabled>发布</button>
            </div>
        </div>

        <div class="section">
            <h2>接收消息</h2>
            <div id="message-container">
                <ul id="message-list"></ul>
            </div>
        </div>

        <div class="section">
            <h2>日志</h2>
            <textarea id="log" readonly></textarea>
        </div>
    </div>
</body>
</html>